<template>
  <cs-card>
    <el-table
      ref="multipleTable"
      :data="adTableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      class="contentTable_G"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="owner" label="广告主" width="260">
      </el-table-column>
      <el-table-column prop="name" label="广告名称" width="160">
      </el-table-column>
      <el-table-column label="投放小区" width="320" prop="residentialQuarters">
      </el-table-column>
      <el-table-column
        prop="sendType.name"
        label="投放类型"
        width="180"
        :filters="typeFilters"
        :filter-method="typeFilterTag"
      >
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="投放时间段" width="160">
        <template v-slot="{ row }">
          {{ row.fromDate }} - {{ row.toDate }}
        </template>
      </el-table-column>
      <el-table-column prop="visitNumber" label="浏览量" width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        :filters="statusFilters"
        :filter-method="statusFilterTag"
      >
        <template v-slot="scoped">
          <el-switch
            v-model="scoped.row.status"
            active-color="#006EFF"
            inactive-color="#DDDDDD"
            class="switchStyle_G"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template v-slot="{ row }">
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="adDetailLinkClick"
            >详情
          </el-link>
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="alterAdLinkClick"
            >修改
          </el-link>
          <el-link type="primary" @click="deleteAdLinkClick(row.id)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination_section_G">
      <span class="currentSelect_G">{{ `共${totalCount}项` }}</span>
      <div class="pagination_right_G">
        <span>{{ `${pageSize}条/页` }}</span>
        <cs-pagination :currentPage="currentPage" :totalPage="totalPage" />
      </div>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsPagination from "@/components/CsPagination/CsPagination.vue";

import { getAdTableData } from "@/api/ad";

export default {
  name: "AdTable",
  components: {
    CsCard,
    CsPagination,
  },
  props: {
    adTableData: {
      default: () => [],
    },
  },
  data() {
    return {
      typeFilters: [
        { text: "banner轮播投放", value: "banner轮播投放" },
        { text: "图文文章投放", value: "图文文章投放" },
        { text: "弹窗广告投放", value: "弹窗广告投放" },
      ],
      statusFilters: [
        { text: "true", value: "true" },
        { text: "false", value: "false" },
      ],
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
    };
  },
  created() {},
  methods: {
    adDetailLinkClick() {
      this.$router.push("/adDetail");
    },
    alterAdLinkClick() {
      this.$router.push("/alterAd");
    },
    statusFilterTag(value, row, column) {
      return row.tag === value;
    },
    typeFilterTag(value, row, column) {
      return row.tag === value;
    },
    // 删除广告链接点击事件
    deleteAdLinkClick(id) {
      const payload = {
        id: [id],
        state: true,
      };
      this.$store.commit("ad/changeShowAdDialogStatus", payload);
    },
  },
};
</script>

<style lang="scss" scoped></style>
